<template>
  <KView class="sys-header">
    <KView class="sys-header-content">
      <KView v-if="title" class="sys-header-search-title">{{title}}</KView>
      <KView class="sys-header-main">
        <KView class="sys-header-info" @click="resetLocation">
          <KView class="sys-header-location clearfix">
            <template v-if="locationText!==null">
              <KView class="ellipsis sys-header-location-text">{{locationText}}</KView>
              <KView class="sys-header-location-dropdown">
                <img class="sys-img" :src="dropdownIcon" mode="aspectFit">
              </KView>
            </template>
          </KView>
          <KView v-if="weatherData!==null" class="sys-header-weather">
            <span style="float:left">{{weatherData.condition}}</span>
            <span style="float:right">{{weatherData.temp}}℃</span>
          </KView>
          <KView v-else-if="locationData!==null">
            <span>{{locationData.weatherMsg}}</span>
          </KView>
        </KView>
        <KView class="sys-header-search">
          <search-input v-if="!title" placeholder="输入关键字搜索" :disabled="true" @click="searchClick"></search-input>
        </KView>
        <KView class="sys-header-avatar">
          <sys-avatar :url="user===null?defaultUser.headimgurl:user.headimgurl" shape="circle"></sys-avatar>
        </KView>
      </KView>
    </KView>

    <sys-dialog fullscreen :visible.sync="openDialog" animation-name="bottom">
      <template slot-scope="scope">
        <location-setting v-if="scope.isShow" @close="toCloseDialog" @reset-location="resetSysLocation"></location-setting>
      </template>
    </sys-dialog>
  </KView>
</template>

<script>
  import SearchInput from 'common/searchInput';
  import SysAvatar from 'common/sysAvatar';
  import SysDialog from 'common/sysDialog';
  import LocationSetting from './locationSetting';

  import GlobalData from 'utils/globalData';
  import MapUtil from 'utils/mapUtil';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],
    props: {
      title: String
    },

    computed: {
      locationText() {
        let location = this.locationData;
        if (location === null) {
          return null;
        }
        let locationData = location.locationData;
        if (locationData === null) {
          return locatlocationDataion.locationMsg;
        }
        return locationData.locationText;
      },

      weatherData() {
        let location = this.locationData;
        if (location === null) {
          return null;
        }

        let weatherData = location.weatherData;
        return weatherData;
      }
    },

    data() {
      return {
        locationData: null,
        dropdownIcon: GlobalData.images.dropdownIcon,
        openDialog: false,
        hasResetLocation: false
      };
    },

    created() {
      this.setSysLocationData();
    },

    methods: {
      setSysLocationData(isReset = false) {
        let location = this.location;
        if (!isReset && location !== null) {
          this.locationData = this.location;
          return;
        }

        let user = this.user;
        if (user === null) {
          user = this.defaultUser;
        }
        return MapUtil.getLocationData(user).then(locationData => {
          this.locationData = locationData;
          this.setLocation(locationData);
          return locationData;
        });
      },

      searchClick() {
        this.$emit('search-click');
      },

      resetLocation() {
        this.openDialog = true;
      },

      resetSysLocation(settingComp) {
        settingComp.loading = true;
        this.setSysLocationData(true).then(() => {
          settingComp.loading = false;
          this.hasResetLocation = true;
        }).catch(() => {
          settingComp.loading = false;
        });
      },

      toCloseDialog() {
        this.openDialog = false;
        if (this.hasResetLocation) {
          this.$emit('location-change');
          this.hasResetLocation = false;
        }
      }
    },

    components: {
      SearchInput,
      SysAvatar,
      SysDialog,
      LocationSetting
    }
  };

</script>

<style lang="scss">
  .sys-header {
    height: 100%;

    .sys-header-content {
      height: 100%;
      position: relative;

      .sys-header-search-title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: formatPx(30);
        text-align: center;
        line-height: formatPx(70);
      }

      .sys-header-main {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;

        >div {
          height: 100%;
        }

        .sys-header-info {
          font-size: formatPx(30);
          max-width: calc(6em + #{formatPx(35)});
          min-width: calc(3em + #{formatPx(35)});

          >div {
            height: formatPx(35);
          }

          .sys-header-location {
            >div {
              float: left;
              height: 100%;
            }

            .sys-header-location-text {
              max-width: 6em;
              min-width: 3em;
              line-height: formatPx(35);
            }

            .sys-header-location-dropdown {
              margin-left: formatPx(10);
              height: 100%;
              width: formatPx(25);
            }
          }

          .sys-header-weather {
            font-size: formatPx(26);
            color: #666666;
          }
        }

        .sys-header-search {
          flex: 1;
          height: 100%;
          margin-left: formatPx(20);
          margin-right: formatPx(20);
        }

        .sys-header-avatar {
          width: formatPx(70);
          height: formatPx(70);
        }
      }
    }
  }

</style>
